<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue';
import request from "../../../../utils/request";
export default {
  data () {
    return {
      isHistoryObj: {},
      cdata: [
        {
          // 名字需要与 “common/map/maps.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
          name: '福州市',
          value: 999,
          elseData:{
            // 这里放置地图 tooltip 里想显示的数据
          }
        },
        {
          name: '厦门市',
          value: 9,
        },
        {
          name: '漳州市',
          value: 8,
        },
        {
          name: '泉州市',
          value: 7,
        },
        {
          name: '三明市',
          value: 6,
        },
        {
          name: '莆田市',
          value: 5,
        },
        {
          name: '南平市',
          value: 4,
        },
        {
          name: '龙岩市',
          value: 3,
        },
        {
          name: '宁德市',
          value: 2,
        }
      ]
    }
  },
  props: {
    isHistory: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    isHistory: {
      handler(newData){
        // console.log("isHistory属性改变了！=》",newData)
        this.isHistoryObj = newData
        request.get("/bigScreen/dangerLevel",{date: newData.date}).then(res=>{
          if (res.success){
            // for (let i = 0; i < this.cdata.length; i++) {
            //   this.cdata[i].value = res.result[i]
            // }
            for (let item of this.cdata) {
              switch (item.name) {
                case ("福州市") :
                  item.value = res.result.fuzhou
                      break
                case ("厦门市"):
                    item.value = res.result.xiamen
                      break
                case ("漳州市"):
                  item.value = res.result.zhangzhou
                      break
                case ("泉州市"):
                  item.value = res.result.quanzhou
                      break
                case ("三明市"):
                  item.value = res.result.sanming
                      break
                case ("莆田市"):
                  item.value = res.result.putian
                      break
                case ("南平市"):
                  item.value = res.result.nanping
                      break
                case ("龙岩市"):
                  item.value = res.result.longyan
                  break
                case ("宁德市"):
                  item.value = res.result.ningde
                  break
              }
            }
          }
          else {
            this.$message.error(res.message)
          }
        })
      },
      immediate: true,
      deep: true,
    }
  },
  components: {
    Chart,
  },
  mounted () {
    let that = this
    this.ws = this.$store.state.websocketModule.ws
    this.ws.subscribe('/bigScreen/dangerLevel', function (message){//有教程说topic前面必须带一个/user前缀，但是我没加也没事啊
      // console.log(JSON.parse(message.body))
      let data = JSON.parse(message.body)
      for (let item of that.cdata) {
        switch (item.name) {
          case ("福州市") :
            item.value = data.fuzhou
            break
          case ("厦门市"):
            item.value = data.xiamen
            break
          case ("漳州市"):
            item.value = data.zhangzhou
            break
          case ("泉州市"):
            item.value = data.quanzhou
            break
          case ("三明市"):
            item.value = data.sanming
            break
          case ("莆田市"):
            item.value = data.putian
            break
          case ("南平市"):
            item.value = data.nanping
            break
          case ("龙岩市"):
            item.value = data.longyan
            break
          case ("宁德市"):
            item.value = data.ningde
            break
        }
      }
          // for (let i = 0; i < that.cdata.length; i++) {
            // that.cdata[i].value = JSON.parse(message.body)[i]
          // }

    });
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
</style>